<template>
	<view class="hbh_container2">
		<headComponent navTitle="登录" :isBack="false"></headComponent>
		<view class="hbh_box">
			<view class="navBar">
				<view v-for="(item,index) in loginList" :key="index" :class="item.active?'active':'title'"
					@click="handelSelect(item)">
					{{item.text}}
				</view>
			</view>
			<view class="" v-show="countorcode">
				<SendCode :maxlength="11" :inpType="'number'" :placeholder="'手机号'" @sendValue="sendCode">
				</SendCode>
				<SendCode :password="true" :maxlength="11" :isSee="true" :placeholder="'登录密码(7~11位数字+字母组合)'"
					@sendValue="sendCode2">
				</SendCode>
			</view>
			<view class="custom">
				<!-- <SendCode :maxlength="11" :inpType="'number'" :placeholder="'请输入您的手机号'" @sendValue="sendCode3">
				</SendCode>
				<SendCode :maxlength="6" :inpType="'number'" :placeholder="'请输入验证码'" @sendValue="sendCode4"
					:isCode="true"></SendCode> -->

			</view>
			<view class="hbh_help" v-show="countorcode">
				<text @click="toResetPwd">忘记密码</text>
				<text @click="toRegister">注册</text>
			</view>
			<!-- 			<view class="hbh_code" v-show="!countorcode">
				<text @click="toRegister">注册</text>
			</view> -->
			<view class="hbh_endBtn" v-show="countorcode" @click="login">
				登录
			</view>
		</view>
		<view v-show="!countorcode" class="barcode">
			<text @click="changeLogin">切换账号登录</text>
			<text @click="handlePicture">从相册选取喵熊造物二维码</text>
		</view>
	</view>
</template>

<script>
	import {
		login,
		scanLogin,
		newLoginTime
	} from "@/api/index.js"
	import SendCode from "@/components/hbhInput/hbhInput.vue"
	import fileApi from "@/uni_modules/hbh-fileIo/js_sdk/index.js"
	export default {
		data() {
			return {
				isActive: false,
				loginList: [{
					active: true,
					text: "账号登录"
				}, {
					active: false,
					text: "扫码登录"
				}],
				phoneNumber: "",
				loginPwd: "",
				phoneNumber2: "",
				code: "",
				countorcode: true,
				isFill: false,
				barcode: null,
				isOk: true,
			};
		},
		components: {
			SendCode
		},
		methods: {
			handlePicture() {
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: (res) => {
						this.scanImg(res.tempFilePaths[0])
					}
				});
			},
			changeLogin() {
				this.countorcode = true
				this.loginList.map(item => item.active = false)
				let obj = this.loginList[0]
				obj.active = true
				this.$set(this.loginList, 0, obj)
				this.barcode.close()
				this.barcode = null
			},
			toRegister() {
				uni.navigateTo({
					url: "/pages/register/register"
				})
			},
			toResetPwd() {
				// uni.showToast({
				// 	icon: "none",
				// 	title: "待开发中..."
				// })
				uni.navigateTo({
					url: "/pages/forgetPwd/forgetPwd"
				})
			},
			login() {
				if (this.countorcode) {
					if (!this.phoneNumber || !this.loginPwd) {
						uni.showToast({
							icon: "error",
							title: "表单不全"
						})
						return
					}
					uni.showLoading({
						mask: true,
						title: "正在登录..."
					})
					plus.device.getInfo({ //需要勾选IDFA
						success: (e) => {
							login({
								phone: this.phoneNumber,
								pwd: this.loginPwd,
								uuid: e.uuid
							}).then((res) => {
								console.log(res)
								if (res.code == 200) {
									uni.setStorageSync("TOKEN", res.token)
									uni.reLaunch({
										url: "/pages/index/index",
										success() {
											uni.hideLoading()
											uni.showToast({
												icon: "success",
												title: "登录成功！"
											})
										}
									})
								}
							}).catch((err) => {
								if (err.code == 400) {
									uni.showToast({
										icon: "error",
										title: err.msg
									})
								} else if (err.code == 500) {
									uni.showToast({
										icon: "error",
										title: "填写格式错误"
									})
								} else {
									uni.showToast({
										icon: "error",
										title: "登陆失败!"
									})
								}
								uni.hideLoading()
							})

						},
						fail: function(e) {
							console.log('getDeviceInfo failed: ' + JSON.stringify(e));
							uni.hideLoading()
						}
					});

					// uni.reLaunch({
					// 	url: "/pages/index/index"
					// })
				} else {
					if (!this.phoneNumber2 || !this.code) {
						uni.showToast({
							icon: "error",
							title: "表单不全"
						})
						uni.hideLoading()
						return
					}
					uni.reLaunch({
						url: "/pages/index/index"
					})
				}
			},
			// 从图片中扫码识别 
			scanImg(src) {
				console.log(src)
				// plus.zip.compressImage({
				// 	//plus.zip.compressImg 官方Api地址 (http://www.html5plus.org/doc/zh_cn/zip.html)
				// 	src: src, //你要压缩的图片路径
				// 	dst:fileApi.golabelUrl+'new/hbh.png', //你要生成的图片路径，路径不能与src相同，不然app端会报错  
				// 	quality: 100, //压缩比例  图片质量[10-100]
				// 	overwrite: true,
				// 	width: '150px' //图片宽度
				// }, function(e) {
				// 	console.log(e.target)
				// 	//调用原生的二维码识别方法
				// 	plus.barcode.scan(e.target, function(type, result) {
				// 		console.log("Scan success:(" + type + ")" + result);
				// 	}, function(e) {
				// 		console.log("Scan failed: " + JSON.stringify(e));
				// 	});
				// }, function(error) {
				// 	uni.showToast({
				// 		title: '识别失败',
				// 		icon: 'none',
				// 		duration: 2000
				// 	});
				// })
				plus.barcode.scan(src, function(type, result) {
					console.log("扫码成功", result)
					if (!result.match(/user_id/g)) {
						uni.showToast({
							icon: "error",
							title: "不是喵熊造物二维码"
						})
						return
					}
					let obj = JSON.parse(result)
					console.log(obj)
					if (new Date().getTime() < obj.validity) {
						console.log("这里")
						uni.showLoading({
							mask: true,
							title: "正在登录..."
						})
						plus.device.getInfo({ //需要勾选IDFA
							success: (e) => {
								scanLogin({
									user_id: obj.user_id,
									uuid: e.uuid
								}).then((res) => {
									if (res.code == 200) {
										uni.setStorageSync(
											"TOKEN",
											res.token)
										uni.reLaunch({
											url: "/pages/index/index",
											success() {
												uni.hideLoading()
												uni.showToast({
													icon: "success",
													title: "登录成功！"
												})
											}
										})
									} else {
										uni.showToast({
											icon: "none",
											title: "登录失败重新尝试！"
										})
										uni.hideLoading()
									}
								}).catch((err) => {
									uni.showToast({
										icon: "none",
										title: JSON
											.stringify(
												err
											)
									})
									console.log(err)
									uni.hideLoading()
								})
							},
							fail: function(e) {
								console.log('getDeviceInfo failed: ' + JSON
									.stringify(e));
								uni.showToast({
									icon: "none",
									title: "设备标识获取异常，请重新尝试！"
								})
								uni.hideLoading()
							}
						});

					} else {
						uni.showToast({
							icon: "none",
							title: "此二维码已过期！"
						})
						uni.hideLoading()
					}
				}, function(e) {
					console.log("Scan failed: " + JSON.stringify(e));
					uni.showToast({
						icon: "none",
						title: JSON.stringify(e)
					})
					uni.hideLoading()
				});
			},
			onmarked(type, result) {
				var text = '未知: ';
				switch (type) {
					case plus.barcode.QR:
						text = 'QR: ';
						break;
					case plus.barcode.EAN13:
						text = 'EAN13: ';
						break;
					case plus.barcode.EAN8:
						text = 'EAN8: ';
						break;
				}
				console.log(text + result);
				this.barcode.close()
				this.barcode = null
				this.barcode = plus.barcode.create('barcode', [plus.barcode.QR], {
					top: '100px',
					left: '0px',
					width: '100%',
					height: '500px',
					position: 'static'
				});
				this.barcode.onmarked = this.onmarked;
				const currentWebview = this.$mp.page.$getAppWebview();
				currentWebview.append(this.barcode);
				this.barcode.start();
			},
			handelSelect(val) {
				if (val.text == '账号登录') {
					this.loginList.map(item => item.active = false)
					val.active = true
					this.countorcode = true
				} else {
					if (this.isOk) {
						if (this.barcode != null) {
							this.barcode.close()
						}
						this.isOk = false
						const currentWebview = this.$mp.page.$getAppWebview(); //注意相关操作写在APP-PLUS条件编译下
						// 扫码成功回调
						if (!this.barcode) {
							this.barcode = plus.barcode.create('barcode', [plus.barcode.QR], {
								top: '100px',
								left: '0px',
								width: '100%',
								height: '500px',
								position: 'static'
							});
							this.barcode.onmarked = this.onmarked;


						}
						setTimeout(() => {
							currentWebview.append(this.barcode);
							this.barcode.start();
							this.loginList.map(item => item.active = false)
							val.active = true
							this.countorcode = false
							this.isOk = true
						}, 1000)
					}

				}
			},
			sendCode(val) {
				this.phoneNumber = val
			},
			sendCode2(val) {
				this.loginPwd = val
			},
			sendCode3(val) {
				this.phoneNumber2 = val
				console.log(this.phoneNumber2)
			},
			sendCode4(val) {
				this.code = val
				console.log(this.code)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.barcode {
		width: 100%;
		height: 200rpx;
		position: fixed;
		bottom: 40rpx;
		left: 0rpx;
		display: flex;
		justify-content: space-evenly;
		align-items: center;
		color: #00A7FF;
	}

	.navBar {
		margin-top: 122rpx;
		display: flex;
		margin-bottom: 114rpx;

		.active {
			text-align: center;
			display: flex;
			align-items: flex-end;
			font-size: 50rpx;
			font-weight: 500;
			color: #000000;
			margin-right: 30rpx;
			position: relative;

			&::before {
				content: "";
				position: absolute;
				bottom: -10rpx;
				left: calc(50% - 35rpx);
				display: block;
				width: 70rpx;
				height: 10rpx;
				background: linear-gradient(270deg, rgba(110, 205, 255, 0) 0%, #00A7FF 100%);
				border-radius: 6rpx 6rpx 6rpx 6rpx;
				opacity: 1;
			}
		}

		.title {
			text-align: center;
			display: flex;
			align-items: flex-end;
			font-size: 36rpx;
			font-weight: 400;
			color: #A3A3A3;
			margin-right: 30rpx;
		}
	}

	.hbh_help {
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 24rpx;
		font-weight: 400;
		color: #51C3FF;
	}

	.hbh_code {
		display: flex;
		justify-content: flex-end;
		align-items: center;
		font-size: 24rpx;
		font-weight: 400;
		color: #51C3FF;
	}

	.hbh_endBtn {
		width: 630rpx;
		margin-left: calc(50% - 315rpx);
		height: 90rpx;
		background: linear-gradient(90deg, #6ECDFF 0%, #00A7FF 100%);
		border-radius: 50rpx 50rpx 50rpx 50rpx;
		opacity: 1;
		font-size: 36rpx;
		font-weight: 500;
		color: #FFFFFF;
		text-align: center;
		line-height: 90rpx;
		margin-top: 100rpx;
	}
</style>